<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于AceEditor、vue、element-ui的mockjs编辑器</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    <el-col :span="12">
        <ca-ace-editor :data-value="editorValue" @chage="editorChage"></ca-ace-editor>
    </el-col>
    <el-col :span="12">
        <ca-ace-editor :read-only="viewReadOnly" :data-value="viewValue"></ca-ace-editor>
    </el-col>
</div>
<template id="caAceEditor">
    <div class="ace_editor" style="min-height:800px">
        <textarea class="ace_text-input">{{dataValue}}</textarea>
    </div>
</template>
</body>
</html>
<script src="https://cdn.makalu.cc/js/mock/mock.js"></script>
<script src="https://cdn.makalu.cc/js/vue/vue.js"></script>
<script src="https://cdn.makalu.cc/js/ace-editor/1.4.12/ace.js"></script>
<script src="https://cdn.makalu.cc/js/ace-editor/1.4.12/ext-language_tools.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/ace/prompt/mock.js"></script>

<script>

    Vue.component("ca-ace-editor", {
        template: "#caAceEditor",
        props: {
            dataValue: {
                default: ""
            },
            readOnly: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                editor: ""
            }
        },
        methods: {
            init() {
                const languageTools = ace.require("ace/ext/language_tools");
                languageTools.addCompleter({
                    getCompletions: function (editor, session, pos, prefix, callback) {
                        callback(null, mock_placeholder);
                    }
                });

                //初始化对象
                this.editor = ace.edit(this.$el)
                //设置风格和语言（更多风格和语言，请到github上相应目录查看）
                let theme = "clouds"
                let language = "json"
                this.editor.setTheme("ace/theme/" + theme)
                this.editor.session.setMode("ace/mode/" + language)
                //字体大小
                this.editor.setFontSize(18);
                //设置只读（true时只读，用于展示代码）
                this.editor.setReadOnly(this.readOnly)
                //自动换行,设置为off关闭
                this.editor.setOption("wrap", "free")
                //启用提示菜单
                ace.require("ace/ext/language_tools")
                this.editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true
                })
                let that = this
                this.editor.getSession().on('change', function () {
                    that.$emit("chage", that.editor.getValue())
                });
            }
        },
        mounted() {
            this.init()
        },
        watch: {
            dataValue: function (newVal, oldVal) {
                this.editor.setValue(JSON.stringify(newVal, null, '\t'))
            }
        }
    })

    const app = new Vue({
        el: "#app",
        data() {
            return {
                editorValue: {
                    "a": 1
                },
                viewReadOnly: true,
                viewValue: {}
            }
        },
        methods: {
            editorChage(value) {
                try {
                    this.viewValue = Mock.mock(eval('(' + value + ')'))
                } catch (e) {
                    console.log("JOSN 格式错误，已知错误")
                }
            }
        }
    })


</script>
